<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useVModel } from "@vueuse/core";
import { getListProvince, getListCity, getListArea } from "@/api/address";

defineOptions({
  name: "AddressCascader"
});
const props = defineProps({
  provinceCode: {
    type: String,
    default: ""
  },
  cityCode: {
    type: String,
    default: ""
  },
  areaCode: {
    type: String,
    default: ""
  },
  address: {
    type: String,
    default: ""
  }
});

const emits = defineEmits([
  "provinceCode",
  "update:provinceCode",
  "cityCode",
  "update:cityCode",
  "areaCode",
  "update:areaCode",
  "address",
  "update:address"
]);

const provinceCode = useVModel(props, "provinceCode", emits);
const cityCode = useVModel(props, "cityCode", emits);
const areaCode = useVModel(props, "areaCode", emits);
const address = useVModel(props, "address", emits);

/**
 * 省份列表
 */
let provinceList = ref([]);

watch(
  () => props.provinceCode,
  () => {
    loadCityList(props.provinceCode);
  }
);

watch(
  () => props.cityCode,
  () => {
    loadCityAreaList(props.provinceCode, props.cityCode);
  }
);

onMounted(() => {
  // 如果省有值，则加载市
  loadProvinceList();
  // 如果市有值，则加载区
  if (props.cityCode) {
    loadCityList(props.provinceCode);
  }
  // 如果区有值，则加载区
  if (props.areaCode) {
    loadCityAreaList(props.provinceCode, props.cityCode);
  }
});

/**
 * 加载省份列表
 */

let loadProvinceList = async () => {
  let { code, data } = await getListProvince<{
    code: number;
    data: any;
    msg: string;
  }>();

  if (code === 0) {
    provinceList.value = data;
  }
};

/**
 * 城市列表
 */
let cityList = ref([]);

/**
 * 加载城市列表
 */

let loadCityList = async (provinceCode: string) => {
  if (!provinceCode) {
    cityList.value = [];
    return;
  }
  let { code, data } = await getListCity<{
    code: number;
    data: any;
    msg: string;
  }>({
    provinceCode: provinceCode
  });
  if (code === 0) {
    cityList.value = data;
  }
};

/**
 * 区县列表
 */
let cityAreaList = ref([]);

/**
 * 加载区县列表
 */
let loadCityAreaList = async (provinceCode: string, cityCode: string) => {
  if (!provinceCode || !cityCode) {
    cityAreaList.value = [];
    return;
  }
  let { code, data } = await getListArea<{
    code: number;
    data: any;
    msg: string;
  }>({
    provinceCode,
    cityCode
  });

  if (code === 0) {
    cityAreaList.value = data;
  }
};

let resetCityList = () => {
  cityList.value = [];
  cityAreaList.value = [];
  cityCode.value = null;
  areaCode.value = null;
};

let resetCityAreaList = () => {
  cityAreaList.value = [];
  areaCode.value = null;
};
</script>

<template>
  <div class="flex flex-row w-[100%]">
    <el-select
      v-model="provinceCode"
      class="w-[120px]"
      placeholder="省"
      clearable
      @change="
        (val: any) => {
          resetCityList();
          loadCityList(val);
        }
      "
    >
      <el-option
        v-for="item in provinceList"
        :key="item.provinceCode"
        :label="item.provinceName"
        :value="item.provinceCode"
      />
    </el-select>
    <el-select
      v-model="cityCode"
      class="w-[120px]"
      placeholder="市"
      clearable
      style="margin-left: 10px"
      @change="
        (val: any) => {
          resetCityAreaList();
          loadCityAreaList(provinceCode, val);
        }
      "
    >
      <el-option
        v-for="item in cityList"
        :key="item.cityCode"
        :label="item.cityName"
        :value="item.cityCode"
      />
    </el-select>
    <el-select
      v-model="areaCode"
      class="w-[120px]"
      placeholder="区"
      clearable
      style="margin-left: 10px"
    >
      <el-option
        v-for="item in cityAreaList"
        :key="item.areaCode"
        :label="item.areaName"
        :value="item.areaCode"
      />
    </el-select>
    <el-input
      v-model="address"
      class="flex-1"
      placeholder="请输入详细地址"
      style="margin-left: 10px"
    />
  </div>
</template>
<style lang="scss" scoped>
.el-select {
  --el-select-width: 120px !important;
}
</style>
